<template>
  <div class="category-wraper">
    <nav-bar class="nav-bar">
      <div slot='center'>分类</div>
    </nav-bar>
    <div class="category">
    <category-list
      class="category-list"
      :category-list="categoryList"
      v-if="categoryList.length > 0"
    />
    <scroll ref="scrollview" class="scroll">
      <goods-list class="goods-list" :goods="goodsList" v-if="goodsList.length > 0"></goods-list>
    </scroll>
  </div>
  </div>
</template>

<script>
import Scroll from "components/common/scroll/Scroll";
import CategoryList from "./childComps/CategoryList.vue";

import { GetCategoryList } from "network/category";
import { getHomeGoods } from "network/home";
import CategoryInfo from "./childComps/CategoryInfo.vue";
import GoodsList from "../../components/content/goods/GoodsList.vue";
import { mixins } from "common/mixin";
import NavBar from '../../components/common/navbar/NavBar.vue';
export default {
  name: "Category",
  data() {
    return {
      categoryList: [],
      goodsList: [],
    };
  },
  components: {
    Scroll,
    CategoryList,
    CategoryInfo,
    GoodsList,
    NavBar,
  },
  mixins: [mixins],
  created() {
    console.log('created')
    GetCategoryList().then((res) => {
      // console.log(res)
      this.categoryList = res.data.category.list;
    });
    getHomeGoods("pop", 1).then((res) => {
      console.log(res);
      this.goodsList = res.data.list;
    });
  },
  mounted() {
  },
  activated(){
    console.log('activated')
    this.$bus.$on("imgLoaded", this.itemImgsListen);
    // this.$refs.scrollvie.scrollRefresh()
  },
  deactivated(){
    console.log('deactivated')
    this.$bus.$off("imgLoaded", this.itemImgsListen);
  },
  destroyed(){
    console.log('destroyed')
  }
};
</script>

<style scoped>
.category-wraper {
  height: 100%;
}
.nav-bar {
  background-color: var(--color-high-text);
  color:#fff;
}
.category {
  display: flex;
  height: calc(100% - 49px - 49px);
  position: fixed;
  top: 49px;
  bottom: 49px;
  overflow: hidden;
}
.category-list {
  width: 100px;
  height: 100%;
}
.scroll {
  flex: 1;
}
.goods-list {
  flex: 1;
}
</style>